import styled from 'styled-components'
import rankBcg from '@/assets/img/rank.png'
export const RankingWrap = styled.div`
    .ranking{
        margin-top:20px;
        width:689px;
        height:472px;
        background:url(${rankBcg});
    }
`
export const ListWrap = styled.div`
    width:230px;
    &:last-child{
        width: 228px;
    }
    .top{
        height:120px;
        padding: 20px 0 0 20px;
        display:flex;
        .cover{
            width:80px;
            height:80px;
            position: relative;
            img{
                width:100%;
                height:100%;
            }
            .msk{
                position:absolute;
                width:100%;
                height:100%;
                left:0;
                top:0;
                background-position: -145px -57px;
            }
        }
        .title{
            width: 116px;
            height:51px;
            margin: 6px 0 0 10px;
            a{  
                display:inline-block;
                cursor: pointer;
                width:100%;
                h3{
                    text-overflow:ellipsis;
                    font-size:14px;
                    overflow:hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color:#333;
                    font-weight:bold;
                }
            }
            .icons{
                margin-top:3px;
                .sprite_02{
                    width:22px;
                    height:22px; 
                    margin-right:10px;
                }
                .sprite_02:first-child{
                    background-position:-267px -205px;
                }
                .sprite_02:last-child{
                    background-position:-300px -205px;
                }
            }
        }
    }
    .list{
        height:319px;
        .item{
            display:flex;
            align-items:center;
            .mark{
                width:36px;
                color:#666;
                font-size:16px;
                text-align:center;
            }
            .hot{
                color:#c10d0c;
            }
        }
    }
    .more, .item{
        height:32px;
        line-height:32px;
        padding-left:15px;
    }
    .more{
        text-align:right;
        padding-right:32px;
        a{
            color:#000;
        }
    }
`